<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./styles.css" />
    <link rel="stylesheet" href="./libs/ol-v6.1.1/ol.css" />
    <link href="./tailwind.min.css" rel="stylesheet" />
  </head>

  <body>
      <div id="popup" class=" bg-gray-200 bg-opacity-90  z-10 top-40 rounded-md m-3 p-3">
          <div id="name">

          </div>
          <div id="info">
              
          </div>
      </div>
    <div class="absolute bg-gray-200 bg-opacity-90  z-10 top-40 rounded-md m-3 p-3">
      <div class="sidebar">
        <h2>Base Layers</h2>
        <div class="m-1">
          <label>
            <input
              type="radio"
              name="baseLayerRadioButton"
              value="OSMStandard"
              checked
              class="m-1"
            />OSMStandard
          </label>
        </div>

        <div class="m-1">
          <label>
            <input
              type="radio"
              name="baseLayerRadioButton"
              value="OSMHumanitarian"
              class="m-1"
            />OSMHumanitarian
          </label>
        </div>
        <div class="m-1">
          <label>
            <input
              type="radio"
              name="baseLayerRadioButton"
              value="StamenTerrain"
              class="m-1"
            />StamenTerrain
          </label>
        </div>
      </div>
    </div>
    <div id="js-map" class="w-screen h-screen absolute"></div>
    <script src="./main.js"></script>
    <script src="./libs/ol-v6.1.1/ol.js"></script>
  </body>
</html>
